<include file="Public/frame-header" />

	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link type="text/css" rel="stylesheet" media="screen" href="__FONT__/css/style.css{$JSDEBUG}"/>
    <link type="text/css" rel="stylesheet" media="screen" href="__FONT__/css/media.css{$JSDEBUG}"/>
    
    <style>
    	.timem {
		    z-index: 9999;
		    width: 100%;
		    background: #fff;
		    position: fixed;
		    top: -56px;
		}
		a.beautydetailbtn {
		    display: block;
		    background: #f04877;
		    text-align: center;
		    color: #fff;
		    margin: 0;
		    height: 50px; 
		    line-height: 50px; 
		    font-size: 20px;
		    position: fixed;
		    bottom: 0;
		    z-index: 125;
		    padding: 0px;
		}
    </style>
</head>
<body>
<div class="ordertime">
	<form action="{:U('/Admin/Order/change')}" method="post">
	<input type="hidden" name="order_id" value="{$id}">
	<div id="leftTabBox" class="timem">
	 	<div class="busy">
	       <p>美容师该时间段忙，请选择其他时间段</p>
	   </div>
			<h1>请设置预约时间</h1>
			<input type="hidden" name="order_time" id="orderTime" value="">
	 	<ul class="tab_ul_new">
	        <li class="on"><a href="javascript:;">今天<span id="localtime">{$today|date='n月j日',###}</span></a></li>
	        <li><a href="javascript:;">明天<span></span></a></li>
	        <li><a href="javascript:;">后天<span></span></a></li>
	 	</ul>
	 	<div class="mytab_box" id="today">
	   		<ul></ul>
	 	</div>
	 	<div class="mytab_box" style="display:none" id="tomorrow">
	  		<ul></ul>
		</div>
	    <div class="mytab_box"  style="display:none" id="afterTomorrow">
	        <ul></ul>
	    </div>
	    <a href="javascript:void(0);" class="btn beautydetailbtn">提交改签</a>
	</div>
	</form>
</div>  

</body>
<script src="__ADMIN__/statics/js/common.js"></script>
<script>
$(function () {
	Wind.use('artDialog', 'iframeTools', function () {
		var submitChange;
		$('.beautydetailbtn').click(function () {
			var form = $('form');

			if (submitChange && submitChange.state() == 'pandding') {
				return false;
			}

			submitChange = $.ajax({
				url: $(form).prop('action'),
				type: 'post',
				data: $(form).serialize(),
				dataType: 'json',
				success: function (result) {
					if (result.state == 'success') {
						art.dialog.close();
					} else {
						alert(result.message);
						art.dialog.close();
					}
				},
				error: function () {

				}
			});
		});
    });
})
</script>
<script type="text/javascript">
var orderTimes, time;
var service_time_config_start, service_time_config_end;
var pad = function(tbl) {
    return function(num, n){
        return (0 >= (n - ''+num.length)) ? num : (tbl[n] || (tbl[n] = Array(n + 1).join(0)))+num;
}    
}([]);
function busyer(){
	  $(".busy").removeClass('busydown');
	  $(".busy").addClass('busyup');
	}
function createTimeDom(wrap, data, start, end) {
	var html = '',
		dateObj = new Date();
		currentTime = Math.floor(dateObj.getTime()/1000),
		startTime = 0;
		
	var html = ''
	var dayEnd = parseInt(data.end);
	var defaultWork = $.isEmptyObject(data.setting);
	for (var j = parseInt(data.start); j <= dayEnd; ) {
		var hour = (new Date(j * 1000)).getHours() + ':00';
// 		if (defaultWork) {
// 			html += '<li class="yesorder" data-time="'+j+'"><a>'+hour+'</a></li>';
// 		} else {
			html += '<li class="noorder" data-time="'+j+'"><a>'+hour+'</a></li>';	
// 		}
		j  += 3600;
	}
	
	$timeSelectObj = $(html);
	wrap.find('ul').append(html);
		
	var orderTimeArr = [];
	if (orderTimes) {
		$.map(orderTimes, function (value, index) {
			orderTimeArr.push(parseInt(index));
		});
	}
	
	var time = Math.floor(new Date().getTime()/1000);
	
	if (data.setting == '0') {
		for (var j = parseInt(data.start); j <= dayEnd; ) {
			var orderElme = wrap.find('ul').find('li[data-time="'+j+'"]');
			if (j > time) {
				if  ($.inArray(j, orderTimeArr) !== -1) {
					var serviceEnd = parseInt(orderTimes [j]);
					orderElme.removeClass('yesorder').addClass('noorder');
					orderElme.next().removeClass('yesorder').addClass('noorder').addClass('multiTime');
					if (serviceEnd - j > 3600) {
						var hideList = Math.ceil((serviceEnd - j)/3600);
						
						j += hideList * 3600;
						if (hideList - 2 <= 0) {
							orderElme.next().next().removeClass('yesorder').addClass('noorder').addClass('multiTime');
						} else {
							for (var n = 0; n < hideList; n++) {
								orderElme.nextAll().eq(n).removeClass('yesorder').addClass('noorder').addClass('multiTime');
							}
						}
					} else {
						j += 3600;
					}
				} else {
					if (!orderElme.hasClass('multiTime')) {
						orderElme.addClass('yesorder').removeClass('noorder');
					}
				}
			} else {
				orderElme.removeClass('yesorder').addClass('noorder');
			}
			
			j  += 3600;
		}
	} else {
		if (!$.isEmptyObject(data.setting)) {
			var settings = data.setting;
			var serviceTime = parseInt($("#serviceTime").val());
			for (var i in settings) {
				if (settings.hasOwnProperty(i)) {
					var end = parseInt(settings [i].end);
					for (var m = parseInt(settings [i].start); m < end; ) {
						
						var orderElme = wrap.find('ul').find('li[data-time="'+m+'"]');
						if (m > time) {
							if  ($.inArray(m, orderTimeArr) !== -1) {
								var serviceEnd = parseInt(orderTimes [m]);
								orderElme.removeClass('yesorder').addClass('noorder');
								orderElme.next().removeClass('yesorder').addClass('noorder').addClass('multiTime');
								if (serviceEnd - m > 3600) {
									var hideList = Math.ceil((serviceEnd - m)/3600);
									
									m += hideList * 3600;
									if (hideList - 2 <= 0) {
										orderElme.next().next().removeClass('yesorder').addClass('noorder').addClass('multiTime');
									} else {
										for (var n = 0; n < hideList; n++) {
											orderElme.nextAll().eq(n).removeClass('yesorder').addClass('noorder').addClass('multiTime');
										}
									}
								} else {
									m += 3600;
								}
							} else {
								if (!orderElme.hasClass('multiTime')) {
									orderElme.addClass('yesorder').removeClass('noorder');
								}
							}
						}
						m += 3600;
					}
				}
			}
		} else {
			wrap.find('ul li').removeClass('yesorder').addClass('noorder');
		}
	}
	
	$(wrap).find("li.noorder").click(function(){
	  $(".busy").removeClass('busyup');
	  $(".busy").addClass('busydown');
	  
	  var txt = '美容师该时间段忙，请选择其他时间段';
	  $('.busy p').html(txt);
	  setTimeout('busyer();',2000)
	});	
	
	
	$(wrap).find("li.yesorder").click(function(){
		$(this).siblings().children('a').removeClass('active');
	    $(this).parent().parent().siblings().children().children().children('a').removeClass('active');
		
	    var selectTime = parseInt($(this).attr('data-time'));
		var next = $(this).next();
		var serviceTime = parseInt($("#serviceTime").val());
		
		if (serviceTime >= 60 && !next.hasClass('yesorder')) {
			$(".busy").removeClass('busyup');
		  	$(".busy").addClass('busydown');
		  
		  	var txt = '你预约的服务时长为' +serviceTime+'分钟,超出了该美容师的服务时间';
		  	$('.busy p').html(txt);
		  	setTimeout('busyer();',2000);
			return false;
		} else if (serviceTime >= 60){
			var count = Math.ceil(serviceTime/60), canOrder = true;
			if (count > 2) {
				$(".busy").removeClass('busyup');
			  	$(".busy").addClass('busydown');
			  
			  	$(this).nextAll().each(function (i, o) {
			  		if (i < count && !$(o).hasClass('yesorder')) {
			  			canOrder = false;
			  			var txt = '你预约的服务时长为' +serviceTime+'分钟,超出了该美容师的服务时间';
					  	$('.busy p').html(txt);
					  	setTimeout('busyer();',2000);
					  	return false;
			  		}
			  	});
			}
			
			if (!canOrder) {
				return false;
			}
		}
		
		$(this).children('a').addClass('active');
		var time = parseInt($(this).attr('data-time'));
		
		objD = new Date(time * 1000);
		var str;  
	    var MM = objD.getMonth()+1;  
	    if(MM<10) MM = '0' + MM;  
	    var dd = objD.getDate();  
	    if(dd<10) dd = '0' + dd;  
		
	    yue = MM + "月" + dd + "日";
	    shijian = objD.getHours() +':' +pad(objD.getMinutes(),1);

	    $(".orderservise .gettime h1 a span").html(yue+' '+shijian);
		
		localStorage.setItem('beautician_id', $('input[name="beautician_id"]').val());
		localStorage.setItem('selectTime', $(this).attr('data-time'));
		
		$("#orderTime").val($(this).attr('data-time'));
		// $(".ordertime").fadeOut('slow');
		// $(".timem").addClass('timemup').removeClass('timemdown');
		
// 		$('body').scrollTop($("#orderServise").offset().top);
	});
}

function buildTimeSelect(data) {
	var Today = data.today;
	var Tomorrow = data.tomorrow;
	var afterTomorrow = data.afterTomorrow;
	
	$timestamp = 24 * 3600;
	createTimeDom($('#today'), Today, service_time_config_start, service_time_config_end);
	createTimeDom($('#tomorrow'), Tomorrow, service_time_config_start + $timestamp,  service_time_config_end + $timestamp);
	createTimeDom($('#afterTomorrow'), afterTomorrow, service_time_config_start + 2 * $timestamp, service_time_config_end + 2 * $timestamp);
	
	var tomorrowDate = new Date((service_time_config_start + $timestamp) * 1000);
	var afterTomorrowDate = new Date((service_time_config_start + 2 * $timestamp) * 1000);
	var tomorrowMonth = tomorrowDate.getMonth();
	var afterTomorrowMonth = afterTomorrowDate.getMonth();
	
	$('.tab_ul_new li').eq(1).find('span').empty().append(++tomorrowMonth+'月'+tomorrowDate.getDate()+'日');
	$('.tab_ul_new li').eq(2).find('span').empty().append(++afterTomorrowMonth+'月'+afterTomorrowDate.getDate()+'日');
}

var hasLoadTime = false;
var beautician_id = {$beautician_id};
$(function () {

	var beauticianTime;
	function getBeauticianServiceTime() {
		if (beauticianTime && beauticianTime.state() == "pending") {
			return false;
		}
		
		beauticianTime = $.ajax({
			url: '{:U("/Index/getTime")}',
			data: {beautician_id: beautician_id},
			dataType: 'json',
			success: function (result) {
				if (result.status == 1) {
					hasLoadTime = true;
					
					time = result.data.time;
					orderTimes = result.data.orderTimes;
					
					service_time_config_start = time.config_start;
					service_time_config_end = time.config_end;
					buildTimeSelect(time);
					
					$(".ordertime").fadeIn('fast');
				}
			},
			error: function () {
				
			}
		});
	}
	
	getBeauticianServiceTime();
	
	tab(".tab_ul_new li", ".mytab_box", 1)
	tab(".dsd li", ".mytab_box2", 1)
	tab(".dsds li", ".mytab_box2s", 1)
	
});

function tab(a,b,c){
	if(c==1){
		$(a).click(function(){  
			var index = $(this).index();
			$(this).addClass("on").siblings().removeClass("on");
			
			$timestamp = 24 * 3600;
			var time = service_time_config_start + index * $timestamp;
			var d = new Date(time * 1000);
			
			updateDaySelect(d);
			
			$(b).hide();      
			$(b+":eq("+index+")").show();
		});
	} else {
		$(a).hover(function(){
			var index = $(this).index();
			$(this).addClass("on").siblings().removeClass("on");
			$(b).hide();    
			$(b+":eq("+index+")").show();
		});
	}        
}

function updateDaySelect(objD) {
    var str;  
    var MM = objD.getMonth()+1;  
    if(MM<10) MM = '0' + MM;  
    var dd = objD.getDate();  
    if(dd<10) dd = '0' + dd;  
    
    var weak = ['日', '一', '二', '三', '四', '五', '六'];
    var ww = objD.getDay();
    
    return(str);  
}
  
updateDaySelect(new Date());
</script>
</html>